import React from 'react';
import './index.less';
interface SlideProps {
  image: string;
  caption: string;
  active?: boolean;
  url?: URL;
}

export const Slide: React.FC<SlideProps> = ({ image, caption, active, url }) => {
  const handleClick = () => {
    if (url) {
      window.open(url);
    }
  };
  return (
    <div className={`slide ${active ? 'active' : ''}`} onClick={handleClick}>
      <img className="img" src={image} alt={caption} />
      <div className="caption">{caption}</div>
    </div>
  );
};
